<template>
	<view class="rescue-form-wrap">
		<navBar title="道路救援下单" :showHome="false" :showBack="true" marginLeft="20%" />
		<view class="content-header" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="pro-img">
				<image :src="detailInfo.info.icon" mode=""></image>
			</view>
			<view class="adress-info" v-if="detailInfo.info.scope != 2">
				<view class="jy"><u-icon name="map" size="40" color="#666666"></u-icon>救援位置</view>
				<view class="adress-name">{{ detailInfo.startAdress.title || detailInfo.startAdress.address}}</view>
			</view>
			<view class="adress-info" v-else>
				<view class="adress-start adress-item">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jy_bg.png">
					</image>
					<view class="txt">{{ detailInfo.startAdress.title || detailInfo.startAdress.address}}</view>
				</view>
				<view class="line"></view>
				<view class="adress-end adress-item">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/zd_bg.png">
					</image>
					<view class="txt">{{ detailInfo.endAdress.title || detailInfo.endAdress.address}}</view>
				</view>
			</view>
		</view>
		<view class="line-bg">
			<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/cd_line.png"
				mode=""></image>
		</view>
		<view class="content-form">
			<view class="form-item">
				<view class="form-label">救援环境</view>
				<view class="form-radio row3">
					<u-radio-group v-model="form.environment" placement="row" activeColor="red" size="30" iconSize="25">
						<u-radio shape="circle" :name="item.code"
							v-for="item in environmentList">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">需救援车型</view>
				<view class="form-radio">
					<u-radio-group v-model="form.carModel" placement="row" activeColor="red" size="30" iconSize="25">
						<u-radio shape="circle" :name="item.code" v-for="item in carModelList">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-list">
				<view class="form-cell">
					<view class="form-cell-label">车牌型号</view>
					<view class="form-cell-input car-type">
						<view class="tag" @click="platePop=true">{{ currPlateStr }}<u-icon name="arrow-down-fill"
								size="25" color="#000"></u-icon></view>
						<u--input placeholder="请输入车牌" border="none" v-model="plateNumber"></u--input>
					</view>
					<view class="form-cell-right"></view>
				</view>
				<view class="form-cell">
					<view class="form-cell-label no-require">品牌车型</view>
					<view class="form-cell-input brand" @click="selectBrand">
						<u--input placeholder="请选择品牌车型" border="none" readonly v-model="form.brandModel"></u--input>
					</view>
					<view class="form-cell-right"><u-icon name="arrow-right" size="30" color="#666666"></u-icon></view>
				</view>
				<view class="form-cell">
					<view class="form-cell-label">联系人</view>
					<view class="form-cell-input">
						<u--input placeholder="请输入联系人" border="none" clearable v-model="form.contacts"></u--input>
					</view>
					<view class="form-cell-right"></view>
				</view>
				<view class="form-cell">
					<view class="form-cell-label">联系手机</view>
					<view class="form-cell-input">
						<u--input placeholder="请输入手机号" border="none" clearable v-model="form.phone"
							type="number"></u--input>
					</view>
					<view class="form-cell-right"></view>
				</view>
			</view>
			<view class="agree">

				<u-checkbox-group v-model="isAgree" placement="column">
					<u-checkbox name="" label=" " size="30" activeColor="red" iconSize="25"></u-checkbox>
				</u-checkbox-group>
				<view>我已阅读并同意 <text style="color:red" @click="lookService">《卡友之家道路救援服务协议》</text>，阿特拉斯和玲珑轮胎，部分产品免费救援，请以客服核对为准。</view>
			</view>
		</view>
		<view class="submit">
			<u-button type="primary" text="申请救援" color="#CF1A1B" shape="circle" @click="saveRescue"></u-button>
		</view>
		<u-popup :show="platePop" @close="platePop=false" mode="bottom">
			<view class="plate-pop">
				<view class="plate-list">
					<view class="plate-item" :class="{'plate-active':currPlate == item}" v-for="item in plateList"
						@click="checkPlate(item)">
						<view>{{ item }}</view>
					</view>
				</view>
				<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="savePlate"></u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'createRescueForm',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		data() {
			return {
				detailInfo: null,
				isAgree: [],
				platePop: false,
				currPlate: '',
				currPlateStr: '',
				plateList: ['京', '沪', '浙', '苏', '粤', '鲁', '晋', '冀', '豫', '川', '渝', '辽', '吉', '黑', '皖', '鄂', '湘', '赣', '闽',
					'陕', '甘', '宁', '蒙', '津', '贵', '云', '桂', '琼', '青', '新', '藏', '港', '澳'
				],
				environmentList: [],
				carModelList: [],
				plateNumber: '',
				form: {
					rescueType: 1, //道路救援类型 1：普通 2：高速
					environment: '',
					carModel: '',
					code: '',
					rescueProjectId: '',
					plateNum: '',
					contacts: '',
					phone: '',
					rescueAddress: '',
					userId: '',
					lat: '',
					lng: '',
					carBrandId: '',
					carBrandPic: '',
					brandModelId: '',
					brandModel: '',
					endAddress: '',
					endLat: '',
					endLng: ''
				}
			}
		},
		methods: {
			// 初始化页面
			async initData(val) {
				this.currPlate = this.plateList[0]
				if(this.getUserInfo.userCarInfo){
					const {plateNum,mobile,driverName,brandModel,brandModelLogo,carId}= this.getUserInfo.userCarInfo
					if(plateNum){
						this.currPlate =  plateNum.substring(0,1)
						this.currPlateStr  = plateNum.substring(0,1)
						this.plateNumber = plateNum.substring(1,plateNum.length)
					}
					this.form.plateNum = plateNum
					this.form.phone = mobile
					this.form.contacts = driverName
					this.form.brandModel = brandModel
					this.form.carBrandPic = brandModelLogo
					this.form.carBrandId =  carId
					this.form.brandModelId =  carId
					
				}
				this.detailInfo = val	
				this.currPlateStr = this.currPlate
				this.form.lat = val.startAdress.location.lat
				this.form.lng = val.startAdress.location.lng
				this.form.rescueAddress = val.startAdress.address
				this.form.rescueProjectId = val.info.id
				this.form.code = val.info.number
				this.form.userId = this.getUserInfo.id
				if (val.info.scope == 2) {
					this.form.endAddress = val.endAdress.address
					this.form.endLat = val.endAdress.location.lat
					this.form.endLng = val.endAdress.location.lng
				}
				//获取救援环境
				try {
					const res = await this.$request({
						url: '/user-center/ter-terminal/get-dict-by-code',
						data: {
							code: 'rescue_environment',
							pageNum: 1,
							pageSize: 100
						}
					})
					this.environmentList = res.datas
					this.form.environment = this.environmentList[0].code
				} catch (e) {

				}
				//获取救援车型
				try {
					const res = await this.$request({
						url: '/user-center/ter-terminal/get-dict-by-code',
						data: {
							code: 'rescue_car_model',
							pageNum: 1,
							pageSize: 100
						}
					})
					this.carModelList = res.datas
					// this.form.carModel = this.carModelList[0].code
				} catch (e) {

				}

			},
			async saveRescue() {
				if (!this.plateNumber || !this.form.phone || !this.form.contacts ||!this.form.environment||!this.form.carModel) {
					this.$refs.uToast.show({
						type: 'default',
						message: '必填项不能为空！'
					})
					return false
				}
				let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if (!reg.test(this.form.phone)) {
					this.$refs.uToast.show({
						type: 'default',
						message: '手机号不正确！'
					})
					return false
				}
				if (this.isAgree.length == 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请勾选服务协议！'
					})
					return false
				}
				this.form.plateNum = this.currPlateStr + this.plateNumber
				//获取救援车型
				let obj = JSON.parse(JSON.stringify(this.form))
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/saveRoadRescue',
						data: obj
					})
					uni.redirectTo({
						url: `/rescuePack/rescueStatusDetail/index?id=${res.datas.id}`
					})
				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
					return false
				}

			},
			//选择车牌简称
			checkPlate(val) {
				this.currPlate = val
			},
			//保存选择好的车牌简称
			savePlate() {
				this.currPlateStr = this.currPlate
				this.platePop = false
			},
			//选择品牌
			selectBrand() {
				uni.setStorageSync('authSource', 'myCar')
				uni.navigateTo({
					url: `/indexPack/car/brand`,
					events: {
						//获取下级页面传递回来的参数
						setBrandData: data => {
							this.form.brandModel = data.seriesName
							this.form.carBrandPic = data.carBrandPic
							this.form.carBrandId = data.brandId
							this.form.brandModelId = data.brandId
						}
					}
				})
			},
			//查看服务协议
			lookService() {
				uni.navigateTo({
					url: '/rescuePack/serviceFile/index'
				})
			},
			
		},
		onShow() {
			// this.initData()
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('confirmOrder', this.initData)
		}
	}
</script>

<style scoped lang="scss">
	.rescue-form-wrap {
		height: 100%;
		width: 100%;
		overflow: auto;

		.line-bg {
			width: 100%;
			height: 6rpx;
			display: flex;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content-header {
			padding: 20rpx 24rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.pro-img {
				width: 100rpx;
				height: 130rpx;
				margin-right: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.adress-info {
				width: calc(100% - 140rpx);

				.jy {
					display: flex;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 16rpx;
					align-items: center;

					/deep/ .u-icon {
						margin-right: 10rpx !important;
					}
				}

				.adress-name {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
					word-wrap: break-all;
					overflow: hidden;
					line-break: anywhere;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.adress-item {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.txt {
						width: calc(100% - 50rpx);
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #333333;
						word-wrap: break-all;
						overflow: hidden;
						line-break: anywhere;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.line {
					height: 24rpx;
					width: 0;
					border: 2rpx solid #EBEBEB;
					margin-left: 16rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.agree {
			padding: 20rpx 24rpx;
			color: #999999;
			font-size: 12px;
			display: flex;
			align-items: center;

		}

		.submit {
			position: fixed;
			width: calc(100% - 48rpx);
			left: 0;
			bottom: 0;
			padding: 20rpx 24rpx;
			z-index: 2;
			background: #f5f5f5;
		}

		.content-form {
			padding-bottom: 200rpx;

			.form-list {
				background: #fff;
				margin-top: 20rpx;

				.form-cell {
					padding: 24rpx 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #EBEDF0;

					.form-cell-label {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						position: relative;
						width: 180rpx;
					}

					.form-cell-label::before {
						content: '*';
						position: absolute;
						left: -16rpx;
						top: 6rpx;
						font-size: 14px;
						color: #CF1A1A;
						font-weight: bold;
					}
					.no-require::before{
						content: '';
					}

					.form-cell-input {
						width: calc(100% - 200rpx);

					}

					.car-type {
						display: flex;

						.tag {
							display: flex;
							color: #333333;

							/deep/ .u-icon {
								margin: 0 10rpx;
							}
						}
					}

					.form-cell-right {
						width: 20rpx;
					}
				}
			}

			.form-item {
				margin-top: 20rpx;
				padding: 24rpx 32rpx;
				background: #fff;


				.form-label {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					padding-bottom: 24rpx;
					position: relative;
					border-bottom: 2rpx solid #EBEDF0;
				}

				.form-label::before {
					content: '*';
					position: absolute;
					left: -16rpx;
					top: 6rpx;
					font-size: 14px;
					color: #CF1A1A;
					font-weight: bold;
				}

				.form-radio {
					margin-top: 10rpx;

					/deep/ .u-radio-group {
						flex-wrap: wrap;

						.u-radio {
							width: 50%;
							margin-bottom: 10rpx;
						}
					}
				}

				.row3 {
					/deep/ .u-radio-group {
						flex-wrap: wrap;

						.u-radio {
							width: 33%;
							margin-bottom: 10rpx;
						}
					}
				}

			}
		}

		.plate-pop {
			padding: 20rpx 24rpx;

			.plate-list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.plate-item {
					padding: 12rpx 16rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					border-radius: 5rpx;
					background: #eee;
					border: 2rpx solid #eee;
					transition: all .3s;
				}

				.plate-active {
					color: #CF1A1A;
					background: #f7eaea;
					border: 2rpx solid #CF1A1A;
				}
			}
		}
	}
</style>